const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//html压缩插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
  //入口
  entry: "./project/src/main.js",
  //出口
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, { loader: "css-loader" }],
      },
      {
        test: /\.less$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader" },
          { loader: "less-loader" },
        ],
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 15 * 1024, // 小于15kb以下的图片会被打包成base64格式
          },
        },
        generator: {
          filename: "images/[name][ext]",
        },
        loader: "img-loader",
      },
    ],
  },
  //插件
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      template: "./project/public/index.html",
    }),
  ],
  optimization: {
    minimizer: [
      //压缩css
      new CssMinimizerPlugin(),
    ],
  },
};
